<template>
  <div class="min-h-screen flex items-center justify-center" :class="themeClasses.bg">
    
    <!-- 居中的登录内容区域 -->
    <div class="relative z-10 w-full max-w-md mx-auto px-4">
      <div class="flex flex-col items-center justify-center">
        <!-- 顶部图标和标题 -->
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent mb-2 animate-gradient">
             AI 知识库
           </h1>
          <p class="text-blue-200 text-sm">
            智能管理 · 高效检索 · 深度分析
          </p>
        </div>

            <!-- 登录卡片 -->
        <div class="bg-opacity-80 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full" :class="[themeClasses.card]">
          <form class="space-y-6" @submit.prevent="handleLogin">
                  <!-- 用户名输入框 -->
                  <div>
                    <label for="username" class="block text-sm font-medium mb-2" :class="themeClasses.text">
                      用户名
                    </label>
                    <div class="relative">
                      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                      </div>
                      <input
                        id="username"
                        v-model="form.username"
                        type="text"
                        required
                        :class="[themeClasses.input, 'block w-full pl-10 pr-3 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors']"
                        placeholder="请输入用户名"
                      />
                    </div>
                  </div>

                  <!-- 密码输入框 -->
                  <div>
                    <label for="password" class="block text-sm font-medium mb-2" :class="themeClasses.text">
                      密码
                    </label>
                    <div class="relative">
                      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                      </div>
                      <input
                        id="password"
                        v-model="form.password"
                        :type="showPassword ? 'text' : 'password'"
                        required
                        :class="[themeClasses.input, 'block w-full pl-10 pr-12 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors']"
                        placeholder="请输入密码"
                      />
                      <button
                        type="button"
                        @click="togglePasswordVisibility"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center"
                        :class="themeClasses.textMuted"
                      >
                        <svg v-if="showPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                        </svg>
                        <svg v-else class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                      </button>
                    </div>
                  </div>

                  <!-- 记住登录状态 -->
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <input
                        id="remember-me"
                        v-model="form.rememberMe"
                        type="checkbox"
                        class="h-4 w-4 text-blue-400 focus:ring-blue-500 border-gray-300 rounded"
                      />
                      <label for="remember-me" class="ml-2 block text-sm" :class="themeClasses.textSecondary">
                        记住登录状态
                      </label>
                    </div>
                  </div>

                  <!-- 错误消息 -->
                  <div v-if="errorMessage" class="border rounded-lg p-3" :class="isDarkMode ? 'bg-red-900 border-red-700' : 'bg-red-50 border-red-200'">
                    <p class="text-sm" :class="isDarkMode ? 'text-red-300' : 'text-red-600'">{{ errorMessage }}</p>
                  </div>

                  <!-- 登录按钮 -->
                  <div>
                    <button
                      type="submit"
                      :disabled="loading"
                      class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
                      :class="isDarkMode ? 'text-white bg-blue-600 hover:bg-blue-700' : 'text-white bg-blue-600 hover:bg-blue-700'"
                    >
                      <span v-if="loading" class="absolute left-0 inset-y-0 flex items-center pl-3">
                        <svg class="h-5 w-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                      </span>
                      {{ loading ? '登录中...' : '登录' }}
                    </button>
                  </div>
          </form>


        </div>
         
         <!-- 版权信息 -->
         <div class="text-center mt-8">
           <p class="text-sm" :class="themeClasses.textSecondary">
           © 2025 AI知识库管理平台
         </p>
         </div>
       </div>
     </div>
   </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/auth'
import { useTheme } from '@/composables/useTheme'

const { themeClasses, isDarkMode } = useTheme()

const router = useRouter()
const loading = ref(false)
const errorMessage = ref('')

const form = reactive({
  username: '',
  password: '',
  rememberMe: false
})

const showPassword = ref(false)

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const handleLogin = async () => {
  if (!form.username || !form.password) {
    errorMessage.value = '请输入用户名和密码'
    return
  }

  loading.value = true
  errorMessage.value = ''
  
  try {
    const result = await loginApi({
      username: form.username,
      password: form.password,
      remember_me: form.rememberMe
    })
    
    // 存储用户信息到 localStorage（兼容现有代码）
    localStorage.setItem('isAuthenticated', 'true')
    localStorage.setItem('username', result.user.username)
    localStorage.setItem('userInfo', JSON.stringify(result.user))
    
    // 登录成功后跳转到主页
    await router.push('/files')
  } catch (error: any) {
    console.error('登录失败:', error)
    errorMessage.value = error.message || '登录失败，请重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 确保与整体风格一致的额外样式 */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* 动态渐变动画 */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background: linear-gradient(-45deg, #60a5fa, #22d3ee, #a855f7, #3b82f6);
  background-size: 400% 400%;
  animation: gradient 6s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 网格背景样式 */
.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* 右侧微妙网格背景 */
.bg-subtle-grid {
  background-image: 
    linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* 自定义动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .lg\:w-1\/2 {
    width: 100%;
  }
}
</style>